package com.fanketly.funacg2.ui.screen

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyItemScope
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.PlaylistRemove
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.fanketly.funacg2.ui.components.PlayModelIconButton
import com.fanketly.funacg2.ui.theme.FunACG2Theme
import com.fanketly.funacg2.ui.viewmodels.MusicViewModel
import com.lzx.starrysky.SongInfo
import com.ramcosta.composedestinations.annotation.Destination
import com.ramcosta.composedestinations.navigation.DestinationsNavigator

@Destination
@Composable
fun PlayList(navigator: DestinationsNavigator, musicViewModel: MusicViewModel) {
    Column(modifier = Modifier.fillMaxSize()) {
        PlayListTopBar(
            musicViewModel.audioRepeatMode,
            navigator::popBackStack,
            musicViewModel::changeRepeatMode,
            musicViewModel::clearPlayList
        )
        LazyColumn(
            modifier = Modifier
                .weight(1f)
        ) {
            items(musicViewModel.getPlayList(), key = { it.songId }) {
                PlayListItem(
                    songInfo = it,
                    isPlaying = it.songId == musicViewModel.audioInfo.songId,
                    onPlay = musicViewModel::playAudioById,
                    onDelete = musicViewModel::deletePlayListSong
                )
            }
        }
    }
}

@Composable
fun PlayListTopBar(
    mode: Int,
    onBack: () -> Unit,
    onChangeRepeatMode: () -> Unit,
    onClearPlayList: () -> Unit,
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
    ) {
        androidx.compose.material3.IconButton(//返回
            modifier = Modifier.size(30.dp), onClick = onBack
        ) {
            androidx.compose.material3.Icon(
                Icons.Default.ArrowBack,
                contentDescription = null,
                modifier = Modifier.fillMaxSize(),
//                tint = androidx.compose.material3.MaterialTheme.colorScheme.primary
            )
        }
        Spacer(modifier = Modifier.weight(1f))
        //播放模式
        PlayModelIconButton(
            mode = mode,
            Modifier
                .padding(end = 8.dp)
                .size(30.dp),
            iconMaxSize = 0.8f,
            onClick = onChangeRepeatMode,
            tint = LocalContentColor.current
        )
        androidx.compose.material3.IconButton(//清空
            modifier = Modifier.size(30.dp), onClick = onClearPlayList
        ) {
            androidx.compose.material3.Icon(
                Icons.Filled.PlaylistRemove,
                contentDescription = null,
                modifier = Modifier.fillMaxSize(),
//                tint = androidx.compose.material3.MaterialTheme.colorScheme.primary
            )
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyItemScope.PlayListItem(
    songInfo: SongInfo,
    isPlaying: Boolean,
    onPlay: (id: String) -> Unit,
    onDelete: (SongInfo) -> Unit,
) {
    Row(
        verticalAlignment = Alignment.CenterVertically, modifier = Modifier
            .animateItemPlacement()
            .padding(8.dp)
            .fillMaxWidth()
            .clickable { onPlay(songInfo.songId) }
    ) {
        Text(
            text = songInfo.songName,
            color = if (isPlaying) MaterialTheme.colorScheme.primary else Color.Unspecified,
            modifier = Modifier.weight(1f)
        )
        androidx.compose.material3.IconButton(//删除
            modifier = Modifier.size(24.dp), onClick = { onDelete(songInfo) }
        ) {
            androidx.compose.material3.Icon(
                Icons.Filled.Clear,
                contentDescription = null,
                modifier = Modifier.fillMaxSize(),
//                tint = androidx.compose.material3.MaterialTheme.colorScheme.primary
            )
        }
    }
}

@Preview
@Composable
private fun PlayListPreview() {
    FunACG2Theme {
        Column {
            PlayListTopBar(mode = 0, onBack = { }, onChangeRepeatMode = { }) {

            }
            LazyColumn {
                items(4) {
                    PlayListItem(
                        songInfo = SongInfo("1", "", "213"),
                        it == 2,
                        onPlay = {},
                        onDelete = {})
                }
            }
        }
    }
}